<template>
  <div>
    <pro-table
      ref="tableRef"
      :data="tableData"
      :total="total"
      :columns="columns"
      :tool-button="false"
      @search="commEvent.onSearch"
      :page-change="commEvent.onPageChange"
    >
      <template #tableHeader>
        <el-row justify="end" v-auth="['sys:role:save']">
          <el-button type="primary" icon="Plus" @click="commEvent.onSave()">新增</el-button>
        </el-row>
      </template>
      <template #operation="{ row }">
        <el-button type="primary" link @click="commEvent.onSave(row)" v-auth="['sys:role:save']">编辑</el-button>
        <el-button
          v-if="row.roleKey !== 'system-admin'"
          type="danger"
          link
          @click="commEvent.onDelete(row)"
          v-auth="['sys:role:remove']"
        >
          删除
        </el-button>
      </template>
    </pro-table>
    <!-- 新增编辑弹窗 -->
    <save-role v-model="saveVisible" :row="currentUser" @refresh="commEvent.onSearch" />
  </div>
</template>

<script setup lang="ts">
import { h, onMounted, ref } from "vue"
import ProTable from "@/components/ProTable/index.vue"
import SaveRole from "./components/SaveRole.vue"
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"
import { ElMessage, ElMessageBox } from "element-plus"
import { statusOptions } from "@/utils/dict"
import dayjs from "dayjs"
import { getRolePageListApi, deleteRoleApi } from "@/api/modules/system"
import { SystemSpace } from "@/api/interface/system"
// 参数
const tableRef = ref<ProTableInstance>() // 表格实例
const tableData = ref<SystemSpace.RolePageList[]>([]) // 用户信息
const total = ref<number>(0) // 总数
const saveVisible = ref<boolean>(false) // 新增编辑弹窗
const currentUser = ref<SystemSpace.RolePageList>() // 当前用户信息
// 页码参数
const pageParams = ref({
  pageIndex: 1,
  pageSize: 10
})
// 表格配置
const columns: ColumnProps<SystemSpace.RolePageList>[] = [
  {
    prop: "sort",
    label: "序号",
    width: 80,
    render: scope => h("span", scope.$index + 1 + (pageParams.value.pageIndex - 1) * pageParams.value.pageSize)
  },
  { prop: "name", label: "角色名称", search: { el: "input" } },
  { prop: "sort", label: "排序" },
  { prop: "status", label: "角色状态", enum: statusOptions, search: { el: "select" } },
  {
    prop: "createTime",
    label: "创建时间",
    search: {
      el: "date-picker",
      span: 2,
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
    }
  },
  { prop: "operation", label: "操作", width: 120, fixed: "right" }
]
// 事件集合
const commEvent = {
  // 获取用户数据
  getTableData: async (params: SystemSpace.RolePageListQuery) => {
    const { data } = await getRolePageListApi(params)
    tableData.value = data.result
    total.value = data.totalCount
  },
  // 查询
  onSearch: () => {
    tableRef.value?.search()
    pageParams.value.pageIndex = 1
    const _search = tableRef.value?.searchParam
    let timeForm: any = { ..._search }
    if (_search?.createTime) {
      timeForm = {
        ..._search,
        startTime: dayjs(_search.createTime[0]).format("YYYY-MM-DD HH:mm:ss"),
        endTime: dayjs(_search.createTime[1]).format("YYYY-MM-DD HH:mm:ss"),
        createTime: undefined
      }
    }
    commEvent.getTableData({ ...pageParams.value, ...timeForm })
  },
  // 分页
  onPageChange: (page: number, size: number) => {
    pageParams.value.pageIndex = page
    pageParams.value.pageSize = size
    const _search = tableRef.value?.searchParam
    let timeForm: any = { ..._search }
    if (_search?.createTime) {
      timeForm = {
        ..._search,
        startTime: dayjs(_search.createTime[0]).format("YYYY-MM-DD HH:mm:ss"),
        endTime: dayjs(_search.createTime[1]).format("YYYY-MM-DD HH:mm:ss"),
        createTime: undefined
      }
    }
    commEvent.getTableData({ ...pageParams.value, ...timeForm })
  },
  // 新增/编辑
  onSave: (row?: SystemSpace.RolePageList) => {
    currentUser.value = row
    saveVisible.value = true
  },
  // 删除
  onDelete: (row: SystemSpace.RolePageList) => {
    ElMessageBox.confirm("确定要删除吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(async () => {
        const res = await deleteRoleApi({ id: row.id })
        if (res.code === "200") {
          ElMessage.success("删除成功")
          commEvent.onSearch()
        }
      })
      .catch(() => {})
  }
}
onMounted(() => {
  commEvent.getTableData(pageParams.value)
})
</script>

<style lang="scss" scoped></style>
